const leaf = document.querySelector('.leaf'),
    lefthand = document.querySelector('.lefthand'),
    righthand = document.querySelector('.righthand'),
    fonts = document.querySelector('.page-font'),
    backl = document.querySelector('.backl'),
    backr = document.querySelector('.backr'),
    page = document.querySelector('.page'),
    pageWrapper = document.querySelector('.page-wrapper'),
    footWrapper = document.querySelector('.foot-wrapper'),
    pictWrapper = document.querySelector('.pict-wrapper'),
    wallWrapper = document.querySelector('.wall-wrapper'),
    audioPage = document.querySelector("#audioPage");


// // 后续添加
// window.onresize = function() {
//     const leaf = document.querySelector('.leaf'),
//         page = document.querySelector('.page');

//     let width = document.querySelector('html').offsetWidth;
//     if (width <= 992) {
//         leaf.style.width = "300px";
//         leaf.style.left = "130px";
// 		page
//     }
// }

// // 后续添加 结束

const handTime = " 2s";
leaf.onclick = function() {
    lefthand.style.animation = "handl forwards";
    lefthand.style.animationDuration = handTime;
    righthand.style.animation = "handr  forwards";
    righthand.style.animationDuration = handTime;
    backl.style.width = "50%";
    backr.style.width = "50%";
    fonts.style.opacity = "1";
    fonts.style.transitionDelay = handTime;
    // 后续添加
    let pageIndex = 0;
    let pageTimer = setInterval(function() {
        pageIndex++;

        if (pageIndex == 3) {
            audioPage.play();
        } else if (pageIndex == 4) {
            page.style.opacity = 0;
            page.style.transition = "all 2s";
            backl.style.width = 0;
            backr.style.width = 0;
            pageWrapper.style.background = 'url(http://r.photo.store.qq.com/psc?/V13w7Reb06kwCt/4r5V*ti6WXpFIFXipK.NEsHxzdPQvkI*MMXtoAx6qfR4VFIIADGiUHIXYtWoVD0ElXuLIqroRvIvqZmUpKtujqGpN*1llcymn3lrxvn33iY!/r)';
        } else if (pageIndex == 7) {
            pageWrapper.style.display = 'none';
            // footWrapper.style.background = 'url(./img/footprint02.png)';
            document.body.style.background = 'url(http://r.photo.store.qq.com/psc?/V13w7Reb06kwCt/4r5V*ti6WXpFIFXipK.NEsHxzdPQvkI*MMXtoAx6qfR4VFIIADGiUHIXYtWoVD0ElXuLIqroRvIvqZmUpKtujqGpN*1llcymn3lrxvn33iY!/r)';
            footChange();
            let footprintTimer = setTimeout(function() {
                footWrapper.style.display = 'block';
                clearTimeout(footprintTimer);
            },50);
        } else if (pageIndex == 17) {
            for (let i = 0; i < prints.length; i++) {
                prints[i].style.opacity = "0";
            }
            footWrapper.style.opacity = "0";
            document.documentElement.style.backgroundColor = "black";
            footWrapper.style.transition = "all 1s";
            footWrapper.style.background = "black";
        } else if (pageIndex == 18) {
            footWrapper.style.display = 'none';
            document.body.style.background = 'none';
        } else if (pageIndex == 19) {
            pictWrapper.style.display = 'flex';
        } else if (pageIndex == 62) {
            pictWrapper.style.transition = "all 1s";
            pictWrapper.style.opacity = "0";
        } else if (pageIndex == 63) {
            pictWrapper.style.display = 'none';
            wallWrapper.style.display = 'flex';
            wallAnimation();
            clearInterval(pageTimer);
        }


        // console.log(pageIndex)
    }, 1000);










    // clearTimeout(pageTimer); 






};
